import {ref} from 'vue'
import {defineStore} from 'pinia'
import {constantRoutes} from '@/router/index.js'
import {mapTree, toTreeArray} from 'xe-utils'
import {cloneDeep, omit} from 'lodash'
import ParentView from '@/components/ParentView/index.vue'
import {getUserAsyncRoutes as getAsyncRoutes} from '@/apis/user'
import { transformPathToName} from '@/utils'

// 引入layout
const Layout = () => import('@/layout/index.vue')

// 引入所有viwe中所有.vue文件
const modules = import.meta.glob('../views/**/*.vue')

/** 加载模块 */
export const loadView = (view) => {
    let res
    for (const path in modules) {
        const dir = path.split('views/')[1].split('.vue')[0]
        if (dir === view) {
            res = () => modules[path]()
        }
    }
    return res
}

/** 将component由字符串转成真正的模块 */
const transformComponentView = (component) => {
    if (component === 'Layout') {
        return Layout
    } else if (component === 'ParentView') {
        return ParentView
    } else {
        return loadView(component)
    }
}

/** 判断路由层级是否大于 2 */
export const isMultipleRoute = (route) => {
    const children = route.children
    if (children?.length) {
        // 只要有一个子路由的 children 长度大于 0，就说明是三级及其以上路由
        return children.some((child) => child.children?.length)
    }
    return false
}

/** 路由降级（把三级及其以上的路由转化为二级路由） */
export const flatMultiLevelRoutes = (routes) => {
    const cloneRoutes = cloneDeep(routes)
    cloneRoutes.forEach((route) => {
        if (isMultipleRoute(route)) {
            const flatRoutes = toTreeArray(route.children)
            route.children = flatRoutes.map((i) => omit(i, 'children'))
        }
    })
    return cloneRoutes
}

/**
 * @description 前端来做排序、格式化
 * @params {menus} 后端返回的路由数据，已经根据当前用户角色过滤掉了没权限的路由
 * 1. 对后端返回的路由数据进行排序，格式化
 * 2. 同时将component由字符串转成真正的模块
 */
const formatAsyncRoutes = (menus) => {
    if (!menus.length) return []
    menus.sort((a, b) => (a?.sort ?? 0) - (b?.sort ?? 0)) // 排序
    return mapTree(menus, (item) => {
        if (item.children && item.children.length) {
            item.children.sort((a, b) => (a?.sort ?? 0) - (b?.sort ?? 0)) // 排序
        }
        return {
            path: item.path,
            name: transformPathToName(item.path),
            component: transformComponentView(item.component),
            redirect: item.redirect,
            meta: {
                hidden: item.hidden,
                keepAlive: item.keepAlive,
                title: item.title,
                svgIcon: item.svgIcon,
                icon: item.icon,
                affix: item.affix,
                breadcrumb: item.breadcrumb,
                showInTabs: item.showInTabs,
                activeMenu: item.activeMenu,
                alwaysShow: item.alwaysShow
            }
        }
    })
}

const storeSetup = () => {
    // 所有路由(常驻路由 + 动态路由)
    const routes = ref([])
    // 动态路由(异步路由)
    const asyncRoutes = ref([])

    // 合并路由
    const setRoutes = (data) => {
        routes.value = constantRoutes.concat(data)
        asyncRoutes.value = data
    }

    // 生成路由
    const generateRoutes = () => {
        return new Promise((resolve) => {
            // 向后端请求路由数据 这个接口已经根据用户角色过滤了没权限的路由(后端根据用户角色过滤路由显得比较安全些)
            getAsyncRoutes().then((res) => {
                const asyncRoutes = formatAsyncRoutes(res.data)
                setRoutes(asyncRoutes)
                const cloneRoutes = cloneDeep(asyncRoutes)
                const flatRoutes = flatMultiLevelRoutes(cloneRoutes)
                resolve(flatRoutes)
            })
        })
    }

    return {
        routes,
        asyncRoutes,
        generateRoutes
    }
}

export const useRouteStore = defineStore('route', storeSetup, {persist: true})
